<!DOCTYPE html>
<!-- saved from url=(0070)http://www.17sucai.com/preview/1153904/2018-05-28/html5help/index.html -->
<html lang="en" class="no-js"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>湖北省体育局重竞技运动管理登录界面</title>
    <link rel="icon" href="../res/image/titleLogoz.png" type="image/png">
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/demo.css">
    <link rel="stylesheet" href="css/jquery.jgrowl.min.css">
    <!--必要样式-->
    <link rel="stylesheet" type="text/css" href="css/component.css">
    <link rel="stylesheet" href="css/style.css">
    <![endif]-->
    <style>
        input::-webkit-input-placeholder{
            color: rgba(145, 145, 145, 0.73);
        }
        input::-moz-placeholder{   /* Mozilla Firefox 19+ */
            color: rgba(145, 145, 145, 0.73);
        }
        input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
            color: rgba(145, 145, 145, 0.73);
        }
        input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
            color: rgba(145, 145, 145, 0.73);
        }

        #logo_pic{
            position: absolute;
            left: 10px;
            top:10px;
            z-index: 999;
            transform: scale(0.5); /*缩放0.5*/
        }




        #load {

            position:absolute;
            width:600px;
            height:36px;
            left:50%;
            top:40%;
            margin-left:-300px;
            overflow:visible;
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
            cursor:default;
            z-index: 999999;
            /*display: none;*/
        }

        #load div {
            position:absolute;
            width:30px;
            height:46px;
            opacity:0;
            font-family:Helvetica, Arial, sans-serif;
            font-size: 35px;
            animation:move 2s linear infinite;
            -o-animation:move 2s linear infinite;
            -moz-animation:move 2s linear infinite;
            -webkit-animation:move 2s linear infinite;
            transform:rotate(180deg);
            -o-transform:rotate(180deg);
            -moz-transform:rotate(180deg);
            -webkit-transform:rotate(180deg);
            color: #FFFFFF;
        }

        #load div:nth-child(2) {
            animation-delay:0.2s;
            -o-animation-delay:0.2s;
            -moz-animation-delay:0.2s;
            -webkit-animation-delay:0.2s;
        }
        #load div:nth-child(3) {
            animation-delay:0.4s;
            -o-animation-delay:0.4s;
            -webkit-animation-delay:0.4s;
            -webkit-animation-delay:0.4s;
        }
        #load div:nth-child(4) {
            animation-delay:0.6s;
            -o-animation-delay:0.6s;
            -moz-animation-delay:0.6s;
            -webkit-animation-delay:0.6s;
        }
        #load div:nth-child(5) {
            animation-delay:0.8s;
            -o-animation-delay:0.8s;
            -moz-animation-delay:0.8s;
            -webkit-animation-delay:0.8s;
        }
        #load div:nth-child(6) {
            animation-delay:1s;
            -o-animation-delay:1s;
            -moz-animation-delay:1s;
            -webkit-animation-delay:1s;
        }
        #load div:nth-child(7) {
            animation-delay:1.2s;
            -o-animation-delay:1.2s;
            -moz-animation-delay:1.2s;
            -webkit-animation-delay:1.2s;
        }

        @keyframes move {
            0% {
                left:0;
                opacity:0;
            }
            35% {
                left: 41%;
                -moz-transform:rotate(0deg);
                -webkit-transform:rotate(0deg);
                -o-transform:rotate(0deg);
                transform:rotate(0deg);
                opacity:1;
            }
            65% {
                left:59%;
                -moz-transform:rotate(0deg);
                -webkit-transform:rotate(0deg);
                -o-transform:rotate(0deg);
                transform:rotate(0deg);
                opacity:1;
            }
            100% {
                left:100%;
                -moz-transform:rotate(-180deg);
                -webkit-transform:rotate(-180deg);
                -o-transform:rotate(-180deg);
                transform:rotate(-180deg);
                opacity:0;
            }
        }

        @-moz-keyframes move {
            0% {
                left:0;
                opacity:0;
            }
            35% {
                left:41%;
                -moz-transform:rotate(0deg);
                transform:rotate(0deg);
                opacity:1;
            }
            65% {
                left:59%;
                -moz-transform:rotate(0deg);
                transform:rotate(0deg);
                opacity:1;
            }
            100% {
                left:100%;
                -moz-transform:rotate(-180deg);
                transform:rotate(-180deg);
                opacity:0;
            }
        }

        @-webkit-keyframes move {
            0% {
                left:0;
                opacity:0;
            }
            35% {
                left:41%;
                -webkit-transform:rotate(0deg);
                transform:rotate(0deg);
                opacity:1;
            }
            65% {
                left:59%;
                -webkit-transform:rotate(0deg);
                transform:rotate(0deg);
                opacity:1;
            }
            100% {
                left:100%;
                -webkit-transform:rotate(-180deg);
                transform:rotate(-180deg);
                opacity:0;
            }
        }

        @-o-keyframes move {
            0% {
                left:0;
                opacity:0;
            }
            35% {
                left:41%;
                -o-transform:rotate(0deg);
                transform:rotate(0deg);
                opacity:1;
            }
            65% {
                left:59%;
                -o-transform:rotate(0deg);
                transform:rotate(0deg);
                opacity:1;
            }
            100% {
                left:100%;
                -o-transform:rotate(-180deg);
                transform:rotate(-180deg);
                opacity:0;
            }
        }

        #loads{
            position: fixed;
            width: 100%;
            height: 100%;
            z-index: 999999;
            display: none;
            margin-top: -1%;
        }
    </style>
</head>
<body>
<div id="loads">
    <div id="load">
        <div>G</div>
        <div>N</div>
        <div>I</div>
        <div>D</div>
        <div>A</div>
        <div>O</div>
        <div>L</div>
    </div>
</div>

<!--<img src="img/logo-opcity.png" alt="logo图片" id="logo_pic">-->
<div id="large-header" class="large-header" style="height: 100%;">
    <div id="midground" class="wall"></div>
    <div id="foreground" class="wall"></div>
    <div id="top" class="wall"></div>
    <div class="logo_box">
        <div style="font-size: 30px;color: black;border-bottom:1px black solid;margin-bottom: 30px">账号登入</div>
        <!--<h3>后台登录</h3>-->
        <form action="#" name="f" method="post">
            <div class="input_outer">
                <span class="u_user"></span>
                <input id="ID" name="manUser" class="text" maxlength="18"  style="color: #000000 !important" type="text" placeholder="请输入账户">
            </div>
            <div class="input_outer">
                <span class="us_uer"></span>
                <input id="PASSWORD" name="manPwd" class="text" maxlength="18" style="color: #000000 !important; position:absolute; z-index:100;" value="" type="password" placeholder="请输入密码">
            </div>
            <div id="LOGIN" class="mb2"><a class="act-but submit" href="javascript:;" onclick="login()" style="color: #FFFFFF">登录</a></div>
        </form>
    </div>


</div><!-- /container -->


<!--<script src="./login_files/TweenLite.min.js"></script>
<script src="./login_files/EasePack.min.js"></script>-->
<script src="css/jquery.js"></script>
<!--<script src="./login_files/rAF.js"></script>
<script src="./login_files/demo-1.js"></script>-->
<script src="css/jquery.jgrowl.min.js"></script>
<script src="css/Longin.js"></script>
<!--<div style="text-align:center;"></div>-->
<script type="text/javascript">
    $(function () {
        height = window.innerHeight;
        largeHeader = document.getElementById('large-header');
        largeHeader.style.height = height+'px';
    })
</script>
</body></html>